<html>
	<head>
		<meta charset="UTF-8">
		<title>jsDOM增删改查操作</title>
	</head>
	<body>
<input id="btn_1" type="button" value="追加一个节点" /><br/>
<input id="txt_2" type="text"/>
<input id="btn_2" type="button" value="追加一个输入内容的节点"/><br />
<input id="btn_4" type="button" value="在所有li之前插入一个节点"/><br />
<input id="txt_3" type="text"/>
<input id="btn_3" type="button" value="在第三个li之前插入一个输入内容的节点"/><br />
<input id="btn_5" type="button" value="删除最后一个节点" /><br />
<input id="txt_6" type="number" placeholder="默认为第二个节点"/>
<input id="btn_6" type="button" value="查找一个节点并添加背景色" /><br />
<ul id="ul">
	<li>原li一</li>
	<li>原li二</li>
	<li>原li三</li>
</ul>

	</body>
<script type="text/javascript">
window.onload=function(){
	var ul=document.getElementById("ul");
	var btn_1=document.getElementById("btn_1");
	btn_1.onclick=function (){
		var oli=document.createElement("li");
		ul.appendChild(oli);
	}
	var txt_2=document.getElementById("txt_2");
	var btn_2=document.getElementById("btn_2");
	btn_2.onclick=function(){
		var oli=document.createElement("li");
		oli.innerText=txt_2.value;
		ul.appendChild(oli);
	}
	
	//insertBefore(节点, 原有节点)  在已有元素前插入
	var btn_3=document.getElementById("btn_3");
	var txt_3=document.getElementById("txt_3");
	var list_3=ul.getElementsByTagName("li");
	btn_3.onclick=function(){
		if(list_3[2]){
			var oli=document.createElement("li");
			oli.innerText=txt_3.value;
			ul.insertBefore(oli,list_3[2]);
		}else{
			alert("不存在此节点");
		}
	
	}
	
	var btn_4=document.getElementById("btn_4");
	var list_4=ul.getElementsByTagName("li");
	btn_4.onclick=function(){
		var oli=document.createElement("li");
		oli.innerText="插入的节点";
		ul.insertBefore(oli,list_3[0]);
	}
	
	//removeChild(节点)  删除一个节点
	//删除最后一个li节点
	var btn_5=document.getElementById("btn_5");
	var list_5=ul.getElementsByTagName("li");
	btn_5.onclick=function(){
		ul.removeChild(list_5[list_5.length-1]);
	}
	
	//查找li元素
	var btn_6=document.getElementById("btn_6");
	var txt_6=document.getElementById("txt_6");
	var list_6=ul.getElementsByTagName("li");
	var a=2;
	btn_6.onclick=function (){
		if(txt_6.value!=""){
			a=txt_6.value;
		}
		if(list_6[a-1]){
			list_6[a-1].style.backgroundColor="gold";
		}else{
			alert("li中第"+a+"节点不存在")
		}
	}
}
</script>
</html>